<template>
  <div>
    <avue-form-design ref="avueFormDesign" style="height: 100vh;"
                      :options="options"
                      @submit="handleSubmit"
                      :toolbar="toolbar">
      <template slot="toolbar-left">
        <el-button
            type="text"
            size="medium"
            icon="el-icon-upload2"
            @click="previewTableShow()">表格预览
        </el-button>

      </template>

    </avue-form-design>
    <create-form ref="createForm" @submit="handleForm"></create-form>
    <preview-table ref="previewTable"></preview-table>
  </div>
</template>

<script>
import formApi, {
  getById,
  updateById,
  getTableOption,
  saveTableOption,
  saveOrUpdate
} from "@/api/start/formEngine/formApi"
import AvueFormDesign from "@/components/form-design/index.vue"
import previewTable from "./previewTable";
import Config from '@/components/form-design/config'
import CreateForm from "@/views/start/formEngine/form/createForm";

Vue.use(Config)
export default {
  name: "design",
  components: {
    CreateForm,
    AvueFormDesign,
    previewTable
  },
  computed: {
    toolbar() {
      return ['preview', 'clear', "save"]
    }
  },
  data() {
    return {
      options: {column: []},
      formId: null,
      formModel: null,
      tempOption: null,

    }
  },
  created() {
    this.formId = this.$route.query.formId
    if (!this.formId) this.formId = this.$route.params.formId
    this.loadFormConfig();
  },
  methods: {
    previewTableShow() {
      this.$refs.avueFormDesign.getFormOption().then(res => {
        this.$refs.previewTable.show(res);
      })
    },
    handleSubmit(data) {
      if (data.column.length < 1) {
        this.$message.warning("至少配置一个表单组件")
        return;
      }
      this.tempOption = data;
      if (this.formModel == null) {
        this.$refs.createForm.show();
        return
      }
      this.submitFormConfig()
    },
    submitFormConfig() {
      let tempOption = this.tempOption
      for (let i = 0; i < tempOption.column.length; i++) {
        tempOption.column[i].sort = i + 1;
      }
      this.formModel.tableOption = tempOption;
      let loading = this.createLoading("提交中")
      formApi.saveOrUpdate(this.formModel).then(res => {
        this.$message.success("保存成功！");
        if (this.formId) {
          this.loadFormConfig();
          return
        }
        let routerJump = this.$router.resolve({path: '/start/formEngine/design/' + res.data.data})
        window.open(routerJump.href, '_self');
        window.location.reload();
      }).finally(() => loading.close())
    },
    handleForm(val) {
      this.formModel = val;
    },
    loadFormConfig() {
      if (!this.formId) return;
      let loading = this.createLoading()
      getTableOption(this.formId).then(res => {
        let data = res.data.data;
        if (!data) return;
        this.formModel = data;
        this.options = data.tableOption
      }).finally(() => loading.close())
    },
    createLoading(text = "Loading", spinner = "el-icon-loading", background = 'rgba(0, 0, 0, 0.7)', lock = true) {
      return this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    }

  },

}
</script>

<style scoped>

</style>
